<template>
    <div class="content">
        <div class="list">
            <div
                v-for="(item, index) in arr"
                :key="index"
                :class="['item', { active: activeIndx === item }]"
                @click="activeIndx = item"
            >
                {{ item }}
            </div>
        </div>

        <div class="content-box">
            <div class="content-item">
                <keep-alive :include="['useCount']" :max="3">
                    <component :is="activeComponent"></component>
                </keep-alive>
            </div>
        </div>

        <button class="content" @click="click">点击跳转vueRouter</button>
    </div>
</template>
<script setup lang="ts">
import useCount from '@/components/useCount.vue';
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const click = () => {
    console.log('点击了');
    router.push({
        name: 'vueRouter',
    });
};
type TabName = '更高' | '更块' | '更强';
const arr = ref<TabName[]>(['更高', '更块', '更强']);
const activeIndx = ref<TabName>('更高');
const activeComponent = computed(() => {
    switch (activeIndx.value) {
        case '更高':
            return useCount;
        case '更块':
            return null;
        case '更强':
            return null;
    }
});
</script>
<style lang="scss" scoped>
.content {
    .list {
        width: 400px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item {
            width: 100px;
            height: 100px;
            background: red;
            margin: 10px;
            text-align: center;
            line-height: 100px;
            color: white;
            border-radius: 10px;
            cursor: pointer;

            &.active {
                background: blue;
            }
        }
    }

    .content-box {
        .content-item {
        }
    }
}
</style>
